<template>
	<view class="container">
		<view class="top-content" :style="'height:'+ (platfrom!=='TOUTIAO'? (titleBarHeight+statusBarHeight+69+86):(69+86)) +'px;'">
			<view :style="'height:'+  (platfrom!=='TOUTIAO'? (titleBarHeight+statusBarHeight+69):(69))+'px;'"></view>
			<view class="top-fixed" :class="{'backGroundWhite':scrollNum>=15}" :style="'height:'+ (platfrom!=='TOUTIAO'?(titleBarHeight+statusBarHeight+69):69) + 'px;'">
				
				<topNavigation :title="'分类'" v-if="platfrom!=='TOUTIAO'" :iconStyle="'dark'"></topNavigation>
				<!-- 搜索框 -->
				<view class="search-input" @click="inputAdress" :style="'top:'+ (platfrom!=='TOUTIAO'?(titleBarHeight+statusBarHeight):10) + 'px;'">
					<view class="search-input-box">
						<view class="search-input-left">
							<image src="../../static/index/search.png" mode="aspectFill"></image>
							<!-- <view>搜索运动类型或者商家名称</view> -->
							<swiper class="swiper_zi" vertical="true" autoplay="true" circular="true" interval="3000">
								<block v-for="(text , textIndex) in adTextList" :key="textIndex">
								<swiper-item>
								  <view class="zimubox">
									<view class="swiper_item">{{text.name}}</view>
								  </view>
								</swiper-item>
								</block>
							</swiper>
						</view>
						<view class="search-map" @tap.stop="JumpPage('serach')">搜索</view>
					</view>
				</view>
			</view>
			<!-- 商户分类 -->
			<view class="store-tag">
				<view @click="switchTag(type.id,TypeIndex)" v-for="(type , TypeIndex) in typeList" :key="TypeIndex"  class="tag-item">
					<image :src="type.icon" mode="aspectFill"></image>
					<view :class="{'tag-name-active':tag==type.id}">{{type.name}}</view>
				</view>
			</view>
		</view>
		<!-- 分类列表 -->
		<view class="type-store-list" :style="'padding-bottom:'+(bottomTabbar+30)+'px;'">
			<view class="type-sort">
				<view :class="{'sort-active':!isHot}" @click="ChangeSortMed">距离排序</view>
				<view :class="{'sort-active':isHot}" @click="ChangeSortMed">人气排序</view>
			</view>
			<!--  -->
			<block v-if="storeList && storeList.length>0">
			<!-- <store-item v-for="(store , storeindex) in storeList" :key="storeindex" :odd="store" @jumpDetil="jumpStoreDetail"></store-item> -->
			<view class="type-item" v-for="(store , storeindex) in storeList" :key="storeindex" @click="jumpDetil(store.id)">
				<view class="item-img">
					<image :src="store.thumb_img" mode="aspectFill"></image>
					<view class="img-mask" v-if="!store.isOpen">
						<image src="../../static/index-time.png" mode="aspectFill"></image>
						<view>即将开放</view>
					</view>
				</view>
				<view class="type-item-right">
					<view class="item-name word-line-clamp1">{{store.name}}</view>
					<view class="item-label word-line-clamp1">
						<block v-for="(tag,index) in store.tags" :key='index'>
							<text>{{tag}}</text> 
							<text v-if="index+1!==store.tags.length">·</text>
						</block>
					</view>
					<view class="item-distance">
						{{store.province}}｜距离{{store.distance}}
					</view>
				</view>
			</view>
			</block>
			<view class="store-none" v-if="storeList==null">
				<image src="https://hesen-gfn-public.oss-cn-shenzhen.aliyuncs.com/default/none.png" mode="aspectFill"></image>
				<view>当前分类暂无商家</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import topNavigation from '../../components/top-navigation/top-navigation.vue';
	import storeItem from '../../components/store-item/store-item.vue';
	import { apiGetNearbyStores,apiGetHotStore} from '../../apis/index.js';
	export default {
		components: {
			topNavigation,
			storeItem
		},
		data() {
			return {
				statusBarHeight:0,
				titleBarHeight:0,
				bottomTabbar:0,
				platfrom:app.globalData.platfrom,
				current:0,
				adTextList:[],
				latitude: 0,
				longitude: 0,
				currentPage: 1,
				pageSize: 10,
				isLastPage: false,
				scrollNum:0,
				scrollLeft:0,
				// 类型
				typeList:[],
				storeList:[],
				tag:1,
				adCode:'',
				adType:0,
				isHot:false,//是否人气排序
			};
		},
		onLoad(options){
			uni.hideTabBar();
			let that = this;
			that.tag = options.tag;
			that.GetTypeList();
			that.SearchTipIndex(1);
		},
		onReady() {
			uni.hideTabBar();
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 +uni.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
		},
		onReachBottom() {
			if(!this.isLastPage){
				this.currentPage++;
				this.getList();
			}
		},
		onPageScroll(e) {
			this.scrollNum = e.scrollTop;
			// if(e.scrollTop >= scroll){
			// 	this.scrollFlag = true;
			// }else{
			// 	this.scrollFlag = false;
			// }
		},
		onPullDownRefresh() {
			let that = this;
			uni.showToast({
				title:'刷新中',
				icon:"loading",
				mask:true
			})
			setTimeout(() => {
				that.currentPage=1;
				that.isLastPage = false;
				that.GetTypeList();
				that.SearchTipIndex(1);
				uni.hideNavigationBarLoading() //完成停止加载
				uni.stopPullDownRefresh() //停止下拉刷新
				uni.hideToast();
			},1000);
		},
		methods:{
			SearchTipIndex(type){
				let that = this;
				app.httpRequest({
					url:app.globalData.api.store.SearchTip,
					data :{
						type: type
					}
				}).then( searchTips => {
					that.adTextList = searchTips.data&&searchTips.data.length>0?searchTips.data:[];
				})
			},
			jumpDetil(id) {
				uni.navigateTo({
					url: '../storeDetail/storeDetail?store_id=' + id,
				});
			},
			jumpStoreDetail(id){
				uni.navigateTo({
					url: '../storeDetail/storeDetail?store_id=' + id,
				});
			},
			// 人气排序 距离排序
			ChangeSortMed(){
				this.isHot = !this.isHot;
				this.currentPage = 1;
				// this.storeList = [];
				this.isLastPage = false;
				this.getList();
			},
			JumpPage(page){
				switch(page){
					case 'storeDetail':
						uni.navigateTo({
							url:'/pages/storeDetail/storeDetail'
						})
					break;
				}
			},
			switchTag(id,index){
				this.tag = id;
				this.scrollLeft = index==0?0: 30 + 57*(index)-50;
				this.currentPage = 1;
				this.storeList = [];
				this.isLastPage = false;
				this.getList();
			},
			GetTypeList(){
				let that = this;
				app.httpRequest({
					url:app.globalData.api.TypeList,
					method:'GET'
				}).then( list => {
					that.typeList = list.data;//list.data.slice(0,5);
					that.getList()
				})
			},
			getList(){
				let that = this;
				let local =  app.globalData.latitude + "," + app.globalData.longitude;
				const tagParms =  {
					page: that.currentPage,
					page_size: that.pageSize,
					location: local,
					adCode:that.adCode,
					adType:that.adType,
					isHot: that.isHot,
					tag:Number(that.tag)
				}
				switch(that.isHot){
					case false:
						apiGetNearbyStores(tagParms).then(res => {
							if(that.currentPage == 1 && res.data.data.length<=0){
								that.storeList = null;
								return;
							}
							if(res.data.data.length>0){
								that.storeList = that.currentPage==1?res.data.data:that.storeList.concat(res.data.data);
								that.isLastPage = res.data.is_last_page;
							}
						})
					break;
					case true:
						apiGetHotStore(tagParms).then(res => {
							if(that.currentPage == 1 && res.data.data.length<=0){
								that.storeList = null;
								return;
							}
							if(res.data.data.data.length>0){
								that.storeList = that.currentPage==1?res.data.data.data:that.storeList.concat(res.data.data.data);
								that.isLastPage = res.data.data.is_last_page;
							}
						})
					break;
				}
			},
			// 跳转搜索页面
			inputAdress(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			jumpDetil(id) {
				uni.navigateTo({
					url: '../storeDetail/storeDetail?store_id=' + id,
				});
			},
		}
	}
</script>

<style lang="scss">
page {
	background-color: #F7f7f7; 
	width: 100%!important;
	overflow-x:hidden!important;
}
.container {
	width: 100%!important;
	overflow-x:hidden!important;
}
.backGroundWhite {
	background-color: #fff!important;
}
.top-content {
	background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
}
.top-fixed {
	width:100%;
	position: fixed;
	top: 0;left: 0;z-index: 5;
}
// 搜索框
.search-input {
	padding: 30rpx 0;
	position: fixed;left: 0;
	font-size: 28rpx;
	color: #999999;
	z-index: 5;
	.search-input-box {
		display: flex;justify-content: space-between;
		background: #F1F2F5;
		border-radius: 40rpx;
		width: 690rpx;
		margin: 0 30rpx;
		height: 78rpx;
		line-height: 78rpx;
		align-items: center;
		
		.search-input-left{
			width: 80%;
			display: flex;
			align-items: center;
			image {
				width: 32rpx;
				height: 32rpx;
				margin: 0 10rpx 0 34rpx;
			}
			.swiper_zi {
				width: 100%;
				height:78rpx;
			}
		}
		.search-map{
			height: 25rpx;
			line-height: 25rpx;
			padding: 0 20rpx;
			padding-right: 34rpx;
			border-left: 1rpx solid #bbb;
			font-size: 24rpx;
			color: #333333;
		}
	}
}
// 商户分类
.store-tag {
	padding: 0 30rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	text-align: center;
	align-items: center;
	flex-wrap: wrap;
}
.tag-item {
	font-size: 24rpx;
	color: #666666;
	image {
		width: 70rpx;
		height: 70rpx;
		display: block;
		margin-bottom: 15rpx;
		margin: 0 auto;
	}
	.tag-name-active {
		color: #FA6400;
	}
}
.tag-item:nth-child(5n){
	margin-right: 0;
}
// 商户分类列表
.type-store-list {
	width: 690rpx;
	margin: 0 auto;
	margin-top: 44rpx;
}
.type-sort {
	display: flex;
	font-size: 24rpx;
	color: #999999;
	line-height: 44rpx;
	text-align: center;
	view:nth-child(1){
		// margin-left: 18rpx;
		margin-right: 15rpx;
	}
	view {
		width: 130rpx;
		height: 44rpx;
		
		&.sort-active {
			font-size: 24rpx;
			color: #333333;
			background: #EFEFEF;
			border-radius: 22rpx;
		}
	}
}
// 商户排序
.type-item {
	padding: 30rpx 0;
	border-bottom: 1rpx solid #efefef;
	display: flex;
	
	.item-img {
		width: 234rpx;
		height: 160rpx;
		margin-right: 30rpx;
		border-radius: 12rpx;
		position: relative;
		
		.img-mask {
			width: 100%;height: 100%;border-radius: 12rpx;
			position: absolute;top: 0;left: 0;
			background: rgba(0,0,0,0.45);
			
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			text-align: center;
			
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			
			image {
				width: 58rpx;height: 58rpx;
			}
		}
		
		image {
			display: block;
			width: 234rpx;
			height: 160rpx;
			border-radius: 12rpx;
		}
		
		.img-label {
			position: absolute;
			height: 30rpx;
			padding: 0 8rpx;
			border-radius: 4rpx;line-height: 30rpx;
			background: rgba(0, 0, 0, 0.5);
			font-size: 20rpx;color: #FFFFFF;text-align: center;
			position: absolute;bottom: 10rpx;right: 14rpx;
		}
	}
	.type-item-right {
		position: relative;
		color: #999999;
		.item-name {
			max-width: 420rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			line-height: 45rpx;
			margin-bottom: 6rpx;
		}
		.item-label {
			max-width: 420rpx;
			font-size: 24rpx;
			line-height: 33rpx;
		}
		.item-distance {
			position: absolute;
			bottom: 0;
			width: 400rpx;
			font-size: 24rpx;
			line-height: 33rpx;
		}
	}
}

.store-none {
	padding:100rpx 0 300rpx 0;
	text-align: center;
	font-size: 28rpx;
	color: #999;
}
</style>
